<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>property</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="./vue.js"></script>
	</head>
	<style>
		html,
		body {
			margin: 0;
			padding: 0;
		}

		#app {
			border: 1px solid red;
			margin: 0;
			padding: 0;
		}

		#blog-demo {
			border: 1px solid blue;
			margin-top: 10px;
			padding: 0;
		}
	</style>

	<body>
		<h3>标题：property--prop</h3>
		<div id="app">
			<blog-post title="prop"></blog-post>
			<blog-post title="属性传值"></blog-post>
			<blog-post title="My journey with Vue"></blog-post>
			<blog-post title="Blogging with Vue"></blog-post>
			<blog-post title="Why Vue is so fun"></blog-post>
		</div>
		<script>
			Vue.component('blog-post', {
				props: ['title'],
				template: '<p>{{ title }}</p>',
			})
			var app = new Vue({
				el: '#app',
				data: {},
				methods: {},
			})
		</script>

		<div id="blog-demo">
			<blog
				v-for="post in posts"
				v-bind:key="post.id"
				:title="post.title"
			></blog>
		</div>
        
		<script>
			Vue.component('blog', {
				props: ['title'],
				template:
					'<button style="margin-left:10px;" @click="tips">{{ title }}</button>',
			})
			var blog = new Vue({
				el: '#blog-demo',
				data: {
					posts: [
						{ id: 1, title: '标题1' },
						{ id: 2, title: '神奇' },
						{ id: 3, title: 'Why Vue is so fun' },
					],
					methods: {
						tips: function () {
							alert('haode ')
						},
					},
				},
			})
		</script>
	</body>
</html>
